<template>
	<view  v-show="show">
		<view class="rbag_model" @touchmove.prevent.stop v-if="showType==1">
		
			<view class="rbag_con hidden">
				<view class="rbag_top">
					<view class="rbag_top_info">
						<view class="messageTips">
							很遗憾，您没拆中
						</view>
						<view class="app_name">恭喜发财</view>
						<view class="rbag_tips">送您一个红包</view>
					</view>
				</view>
				<view class="open_rbag_btn" :animation="openbrnanimation" @click="openbtn()">開</view>
			</view>
			<!-- <view class="rbag_con">
				<view class="hide_btn" @click.stop="hidebtn">
					<icon type="cancel" color="#fbd977" size="28" />
				</view>
			</view> -->
		</view>
		
		<view class="open_rbag_model" v-if="showType==2" @touchmove.prevent.stop>
			<image class="rbag_conbg" src="/static/images/index/openrbag.png"></image>
			<view class="rbag_conbg open_rbag_con">
				<view class="open_title">— 恭喜您获得 —</view>
				<view class="rbag_detail">
					<view class="open_money">
						<countup :num="money" color="#c95948" width='21' height='34' fontSize='34'></countup>
						<view class="danwei">元</view>
					</view>
					<view class="open_tips">已存入钱包，可直接体现</view>
					<!-- <view class="giftArr">
						<view class="giftItem" v-for="(item,index) in giftArr" :key="index">
							<image :src="item.icon" mode=""></image>
							<view class="name">
								{{item.text}}
							</view>
						</view>
					</view> -->
				</view>
				<view class="lookbag_box">
					<view class="lookbag_btn">
						<view class="text" @click.stop="lookbagbrn()">确认</view>
					</view>
				</view>
			<!-- 	<view class="hide_btn" @click.stop="hidebtn()">
					<icon type="cancel" color="#fbd977" size="28" />
				</view> -->
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import countup from '@/components/countUp.vue';
	export default {
		props:{
			// title:{
			// 	default : '',
			// 	type  :String,
			// },
		},
		data() {
			return {
				show: false ,
				openbrnanimation:{},
				showType : 1 ,
				giftArr:[
					{
						text:'',
						icon:'../../static/images/other/redEnvelope.png',
					},
					{
						text:'',
						icon:'../../static/images/other/money.png',
					},
					{
						text:'',
						icon:'../../static/images/other/coupons.png',
					},
				],
				bgmObj:{
					url: 'http://shiliu.gdxuanbao.com/caa59f77.mp3',
					controls : false,//控制显示
					
				},
				money: 0,
			};
		},
		methods:{
			// 红包封面 => 关闭按钮
			hidebtn() {
				this.show = false;
				this.money = 0 ;
			},
			// 红包封面 => 開红包按钮
			openbtn() {
				let myAudio = uni.createInnerAudioContext({
					// src : this.bgmObj.url,
					// autoplay : true,
					// volume : 1,
				})
				myAudio.src = this.bgmObj.url
				myAudio.autoplay = true
				
				var animation = uni.createAnimation({
					duration: 1000,
					timingFunction: 'ease',
				})
				this.openbrnanimation = animation;
				// animation.rotate3d(0,1,0,360).step();
				animation.rotateY(360).step();
				this.openbrnanimation = animation.export();
				setTimeout(()=> {
					this.openbrnanimation = {};
					this.showType = 2
				}, 1000);
				
				this.$emit('goLuckyDraw')
				
				// setTimeout(() => {
				// 	// that.$Router.push({
				// 	// 	path: '/pages/index/collage-detail/collage-detail',
				// 	// 	query: {
				// 	// 		id: that.$Route.query.id,
				// 	// 		teammemberid: that.$Route.query.teammemberid
				// 	// 	}
				// 	// })
				// }, 2000);
			},
			// 打开红包  => 查看钱包
			lookbagbrn() {
				this.hidebtn()
				// this.hideopenbtn();
			},
		},
		components:{
			countup,
		},
		filters:{
			
		},
	}
</script>

<style lang="scss" scoped>
	// 红包封面
		.rbag_model {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100vh;
			background-color: rgba(0, 0, 0, 0.3);
			z-index: 1000;
	
			.rbag_con {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				width: 80%;
				height: 840upx;
				background-color: #da4d44;
				margin: auto;
				border-radius: 14upx;
				box-shadow: 0upx 0upx 10upx rgba(0, 0, 0, 0.2);
	
				.rbag_top {
					position: absolute;
					left: -20%;
					top: 0;
					width: 140%;
					height: 540upx;
					background-color: #e0534a;
					border-radius: 0 0 50% 50%;
					box-shadow: 0 0 14upx rgba(0, 0, 0, 0.4);
					z-index: 1001;
	
					.rbag_top_info {
						margin-top: 60upx;
						@include flexColCenter;
						
						.rbag_logo {
							width: 160upx;
							height: 160upx;
							border-radius: 50%;
							display: block;
							margin: 0 auto;
							overflow: hidden;
						}
						.messageTips{
							font-size: 33rpx;
							color: #fff;
							margin-bottom: 100rpx;
						}
	
						.app_name {
							font-size: 38upx;
							color: #f6ac96;
							text-align: center;
							margin-top: 18upx;
							letter-spacing: 1upx;
						}
	
						.rbag_tips {
							font-size: 50upx;
							color: #edddd3;
							text-align: center;
							margin-top: 34upx;
							letter-spacing: 1upx;
						}
					}
				}
	
				.open_rbag_btn {
					position: absolute;
					top: 450upx;
					left: 0;
					right: 0;
					width: 180upx;
					height: 180upx;
					line-height: 180upx;
					border-radius: 50%;
					margin: 0 auto;
					text-align: center;
					background-color: #ffd287;
					font-size: 55upx;
					color: #fef5e8;
					box-shadow: 2upx 2upx 6upx rgba(0, 0, 0, 0.2);
					z-index: 1002;
				}
	
				.hide_btn {
					position: absolute;
					bottom: -110upx;
					left: 0;
					right: 0;
					width: 80upx;
					height: 80upx;
					line-height: 80upx;
					text-align: center;
					margin: 0 auto;
				}
			}
	
			.hidden {
				overflow: hidden;
			}
		}
	
		// 打开红包
		.open_rbag_model {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100vh;
			background-color: rgba(0, 0, 0, 0.3);
			z-index: 1000;
	
			.rbag_conbg {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				width: 80%;
				height: 840upx;
				margin: auto;
				z-index: 1001;
			}
	
			.open_rbag_con {
				z-index: 1002;
	
				.open_title {
					height: 120upx;
					height: 100upx;
					line-height: 120upx;
					text-align: center;
					font-size: 38upx;
					letter-spacing: 2upx;
					color: #e46965;
				}
	
				.rbag_detail {
					// margin-top: 60upx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					.giftArr{
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						width: 85%;
						color: #E15249;
						background-color: #f9f1dc;
						height: 600rpx;
						padding: 0 20rpx;
						.giftItem{
							margin-bottom: 20rpx;
							width: 100%;
							border-radius: 20rpx;
							background-color: #fff;
							height: 160rpx;
							display: flex;
							align-items: center;
							padding: 0 20rpx;
							image{
								width: 80rpx;
								height: 80rpx;
							}
							.name{
								flex: 1;
								display: grid;
								place-items : center;
								font-size: 32rpx;
							}
						}
					}
					.open_money {
						margin-top: 90upx;
						text-align: center;
						font-size: 80upx;
						color: #c95948;
						font-weight: bold;
						display: flex;
						justify-content: center;
	
						.danwei {
							font-size: 30upx;
							margin-left: 16upx;
							margin-top: 24upx;
						}
					}
	
					.open_tips {
						text-align: center;
						font-size: 30upx;
						color: #d26762;
						margin-top: 30upx;
					}
				}
	
				.lookbag_box {
					margin-top: 230upx;
					display: flex;
					justify-content: center;
	
					.lookbag_btn {
						width: 70%;
						height: 90upx;
						line-height: 90upx;
						text-align: center;
						font-size: 32upx;
						color: #c95948;
						letter-spacing: 2upx;
						background-color: #ffd356;
						border-radius: 50upx;
						box-shadow: 0upx 0upx 4upx rgba(0, 0, 0, 0.2);
					}
				}
	
				.hide_btn {
					position: absolute;
					bottom: -110upx;
					left: 0;
					right: 0;
					width: 80upx;
					height: 80upx;
					line-height: 80upx;
					text-align: center;
					margin: 0 auto;
				}
			}
		}
	
</style>
